/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-input {
	width: var(--pure-input-width, 100%);
	height: var(--pure-input-height, 2.85em);
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--pure-input-gap, 8px);
	transition: 300ms;
	position: relative;

	&__icon {
		font-size: var(--pure-input-icon-font-size, var(--pure-font-size-large));
		font-weight: var(--pure-input-icon-font-weight);
		color: var(--pure-input-icon-color);
		margin: var(--pure-input-icon-margin);
		padding: var(--pure-input-icon-padding);
		width: var(--pure-input-icon-width);
		height: var(--pure-input-icon-height);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 1;

		&--before {
			font-size: var(
				--pure-input-icon-before-font-size,
				var(--pure-input-icon-font-size, var(--pure-font-size-large))
			);
			font-weight: var(--pure-input-icon-before-font-weight, var(--pure-input-icon-font-weight));
			color: var(--pure-input-icon-before-color, var(--pure-input-icon-color));
			margin: var(--pure-input-icon-before-margin, var(--pure-input-icon-margin));
			padding: var(--pure-input-icon-before-padding, var(--pure-input-icon-padding));
			width: var(--pure-input-icon-before-width, var(--pure-input-icon-width));
			height: var(--pure-input-icon-before-height, var(--pure-input-icon-height));
		}

		&--after {
			font-size: var(--pure-input-icon-after-font-size, var(--pure-input-icon-font-size));
			font-weight: var(--pure-input-icon-after-font-weight, var(--pure-input-icon-font-weight));
			color: var(--pure-input-icon-after-color, var(--pure-input-icon-color));
			margin: var(--pure-input-icon-after-margin, var(--pure-input-icon-margin));
			padding: var(--pure-input-icon-after-padding, var(--pure-input-icon-padding));
			width: var(--pure-input-icon-after-width, var(--pure-input-icon-width));
			height: var(--pure-input-icon-after-height, var(--pure-input-icon-height));
		}
	}

	&__input {
		width: 100%;
		height: 100%;
		font-size: inherit;
		border: none;
		outline: none;
		background: transparent;
		position: relative;
		z-index: 1;
	}

	&__clear {
		font-size: var(--pure-input-clear-icon-font-size);
		font-weight: var(--pure-input-clear-icon-font-weight);
		color: var(--pure-input-clear-icon-color);
		margin: var(--pure-input-clear-icon-margin);
		padding: var(--pure-input-clear-icon-padding);
		width: var(--pure-input-clear-icon-width);
		height: var(--pure-input-clear-icon-height);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 1;
	}

	&:focus-within {
		&.pure-input--focus-type {
			&--border-all {
				border: var(
					--pure-input-focus-border,
					var(--pure-input-focus-border-width, 1px) var(--pure-input-focus-border-style, solid)
						var(--pure-input-focus-border-color, var(--pure-theme-primary))
				);
			}

			&--border-bottom {
				border-bottom: var(
					--pure-input-focus-border-bottom,
					var(--pure-input-focus-border-width, 1px) var(--pure-input-focus-border-style, solid)
						var(--pure-input-focus-border-color, var(--pure-theme-primary))
				);
			}
		}
	}

	&--disabled {
		background: var(--pure-input-disabled-background, var(--pure-background-disabled));
		opacity: var(--pure-input-disabled-opacity, var(--pure-opacity-disabled));
		pointer-events: none;
		user-select: none;
	}

	&--readonly {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			background: transparent;
			z-index: 1;
		}
	}
}
